<template>menu
    <div>
        <p>数据列表</p>
        <el-button @click="onAdd">添加</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="id" label="编号" width="180"></el-table-column>
        <el-table-column prop="title" label="菜单名称" width="180"></el-table-column>
        <el-table-column prop="level" label="菜单级数"></el-table-column>
        <el-table-column prop="name" label="前端名称" />
        <el-table-column prop="icon" label="前端图标" />
        <el-table-column label="是否显示">
            <template #default="scope">
                <el-switch :value="scope.row.status===1?true:false" />
            </template>
        </el-table-column>

        <el-table-column prop="sort" label="排序" />
        <el-table-column label="设置">
            <el-button @click="onLook" type="text">查看下级</el-button>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="text">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination v-model:currentPage="pagination.pageNum" v-model:page-size="pagination.pageSize"
        :page-sizes="[1,5,10,20]" layout="total,sizes, prev, pager, next,jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

</template>

<script setup lang="ts">
import * as api from "@/request/api";
import useTable from "@/hooks/useTable"
import { ref } from "vue"

let num = ref(0)

let { tableData, pagination, handleSizeChange, handleCurrentChange, getTableData } = useTable(api.admin.getMenuList, { parentId: num })



let onLook = () => {
    console.log("onLook");
}
let onAdd = () => {
    console.log("onAdd");
}

</script>